<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="bg-white rounded-4 p-4 flex flex-column grid-gap-4" v-if="form.day || form.start_day">
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
					<text class="flex-1 h9 text-grey text-nowrap ">上工日期</text>
					<text class="h9 font-weight-600" v-if="form.day"> {{ form.day }} </text>
					<text class="h9 font-weight-600 text-break-all" v-else> {{ form.start_day }} ~ {{ form.end_day }}
						{{ form.day_num_text }} </text>
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="startShow = true;" hover-class="bg">
					<text class="flex-1 h9 text-grey">上班时间</text>
					<x-picker v-model:show="startShow" v-model="form.start" keyName="text" valueName="text"
						v-if="start.length > 0" :columns="[start]" confirm-color="var(--xl-primary)"
						@confirm="startTimePopup">
						<text class="h9 font-weight-600"> {{ form.start }} </text>
					</x-picker>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="endShow = true;" hover-class="bg">
					<text class="flex-1 h9 text-grey">收班时间</text>
					<text class="h9 font-weight-600" @tap.stop="entNextDay">{{ form.end_next_day ? '明日' : '今日' }}</text>
					<x-picker v-model:show="endShow" v-model="form.end" keyName="text" valueName="text"
						v-if="end.length > 0" :columns="[end]" confirm-color="var(--xl-primary)"
						@confirm="endTimePopup">
						<text class="h9 font-weight-600"> {{ form.end }} </text>
					</x-picker>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex">
					<button class="flex-1 btn-primary btn-round" @tap="submit">保存</button>
				</view>
			</view>
			<x-alert type="warning" :closed="false">
				<uni-icons type="info" color="var(--xl-warning-light-3)"></uni-icons>
				左右滑动可选择月份
			</x-alert>
			<swiper class="swiper bg-white">
				<swiper-item>
					<view class="bg-white p-4 flex flex-column grid-gap-2">
						<text class="font-weight-600">本月({{ month }}月)</text>
						<view class="grid-columns-14 grid-x-gap-2 grid-y-gap-6">
							<view class="grid-column-2 flex flex-column flex-center rounded-4 py-2"
								v-for="(w, index) in week" :key="index">
								<text class="h10 font-weight-600">{{ w }}</text>
							</view>
							<view class="grid-column-2" v-for="_ in monthNum" :key="_"></view>
							<view class="grid-column-2 flex flex-column flex-center rounded-4 py-2"
								v-for="(item, index) in list.month" :key="index"
								:class="{ 'bg-primary text-white': !item.disable && !item.scheduling && !selectedList.includes(item.day_time), 'bg-danger-light-7 text-white': item.scheduling && !selectedList.includes(item.day_time), 'bg-warning text-white': selectedList.includes(item.day_time), 'bg': item.disable }"
								@tap="selected(item)">
								<text class="h6">{{ item.day }}</text>
								<text class="h10" v-if="item.scheduling">已排班</text>
								<text class="h10" v-else-if="selectedList.includes(item.day_time)">已选择</text>
								<text class="h10" v-else>休息</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="bg-white p-4 flex flex-column grid-gap-2">
						<text class="font-weight-600">下一月({{ tomonth }}月)</text>
						<view class="grid-columns-14 grid-x-gap-2 grid-y-gap-6">
							<view class="grid-column-2 flex flex-column flex-center rounded-4 py-2"
								v-for="(w, index) in week" :key="index">
								<text class="h10 font-weight-600">{{ w }}</text>
							</view>
							<view class="grid-column-2" v-for="_ in tomonthNum" :key="_"></view>
							<view class="grid-column-2 flex flex-column flex-center rounded-4 py-2"
								v-for="(item, index) in list.tomonth" :key="index"
								:class="{ 'bg-primary text-white': !item.disable && !item.scheduling && !selectedList.includes(item.day_time), 'bg-danger-light-7 text-white': item.scheduling && !selectedList.includes(item.day_time), 'bg-warning text-white': selectedList.includes(item.day_time), 'bg': item.disable }"
								@tap="selected(item)">
								<text class="h6">{{ item.day }}</text>
								<text class="h10" v-if="item.scheduling">已排班</text>
								<text class="h10" v-else-if="selectedList.includes(item.day_time)">已选择</text>
								<text class="h10" v-else>休息</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import { $func, $api, $message, $page, $auth } from '@/utils';
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const loading = ref(false)
const list = ref({})
const startShow = ref(false)
const endShow = ref(false)
const start = ref([])
const end = ref([])
const monthNum = ref(0);
const month = ref(0);
const tomonthNum = ref(0);
const tomonth = ref(0);
const form = ref({
	day: '',
	day_num: 0,
	day_num_text: '',
	start_day: '',
	end_day: '',
	end_next_day: false,
	start_time: '',
	end_time: '',
	start_date: '',
	end_date: '',
	start: '09:00',
	end: '18:00'
})
const selectedList = ref([])
const getData = () => {
	loading.value = true;
	$api.TechnicianScheduling.adjustScheduling().then((data: any) => {
		list.value = data;
		monthNum.value = data.month[0].week;
		tomonthNum.value = data.tomonth[0].week;
		month.value = data.month[0].month;
		tomonth.value = data.tomonth[0].month;
	}).catch(() => { }).finally(() => {
		loading.value = false;
	})
}
const get24hData = (day: string) => {
	let arr = [];
	for (let i = 0; i <= 23; i++) {
		const date = new Date(day + ' 00:00:00');
		date.setHours(i);
		date.setMinutes(0);
		arr.push({
			text: i.toString().padStart(2, '0') + ':00',
			date: date
		})
		date.setMinutes(30);
		arr.push({
			text: i.toString().padStart(2, '0') + ':30',
			date: date
		})
	}
	return arr
}
const selected = (item: any) => {
	if (item.disable) { return; }
	let D: any = {
		start_time: item.day_time + ' 09:00:00',
		end_time: item.day_time + ' 18:00:00',
		start: '09:00',
		end: '18:00'
	}
	D.end_next_day = false;
	if (item.scheduling) {
		D.id = item.scheduling.id;
		D.start_time = item.scheduling.start_time;
		D.end_time = item.scheduling.end_time;
		const start_date = new Date(item.scheduling.start_time.replace(/-/g, '/'));
		const end_date = new Date(item.scheduling.end_time.replace(/-/g, '/'));
		D.start = `${start_date.getHours().toString().padStart(2, '0')}:${start_date.getMinutes().toString().padStart(2, '0')}`;
		D.end = `${end_date.getHours().toString().padStart(2, '0')}:${end_date.getMinutes().toString().padStart(2, '0')}`;
		D.start_date = start_date;
		D.end_date = end_date;
		start_date.setDate(start_date.getDate() + 1);
		D.end_next_day = start_date.getDate() === end_date.getDate();
	}
	if (batch.value) {
		if (form.value.start_day && !form.value.end_day) {
			const date = new Date(item.day_time);
			const formDate = new Date(form.value.start_day);
			if (date < formDate) {
				D.start_day = item.day_time;
				D.end_day = form.value.start_day;
			} else {
				D.start_day = form.value.start_day;
				D.end_day = item.day_time;
			}
			selectedList.value = [];
			const day_num = Math.floor((new Date(D.end_day).getTime() - new Date(D.start_day).getTime()) / 86400000) + 1;
			const start_date = new Date(D.start_day);
			for (let i = 0; i < day_num; i++) {
				selectedList.value.push(`${start_date.getFullYear()}/${(start_date.getMonth() + 1).toString().padStart(2, '0')}/${start_date.getDate()}`);
				start_date.setDate(start_date.getDate() + 1);
			}
			D.day_num = day_num;
			D.day_num_text = `共${day_num}天`;
		} else {
			D.start_day = item.day_time;
			selectedList.value = [
				item.day_time
			];
			D.end_day = '';
			D.day_num = 0;
			D.day_num_text = '';
		}
	} else {
		D.day = item.day_time;
	}
	form.value = D;
	nextTick(() => {
		start.value = get24hData(item.day_time);
		end.value = get24hData(item.day_time);
	})
}
const startTimePopup = (data: any) => {
	form.value.start = data.text
	const date = data.date;
	form.value.start_date = date;
	form.value.start_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${data.text}:00`;
}
const endTimePopup = (data: any) => {
	form.value.end = data.text
	let date = data.date;
	if (form.value.end_next_day) {
		date = new Date(form.value.start_time);
		date.setDate(date.getDate() + 1);
	}
	form.value.end_date = date;
	form.value.end_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${data.text}:00`;
}
const entNextDay = () => {
	form.value.end_next_day = !form.value.end_next_day;
	const date = new Date(form.value.start_time);
	if (form.value.end_next_day) {
		date.setDate(date.getDate() + 1);
		form.value.end_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${form.value.end}:00`;
	} else {
		form.value.end_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${form.value.end}:00`;
	}
}
const submit = () => {
	loading.value = true;
	$api.TechnicianScheduling.update(form.value).then(() => {
		form.value.id = '';
		form.value.day = '';
		form.value.day_num = '';
		form.value.start_day = '';
		form.value.end_day = '';
		selectedList.value = [];
		getData();
	})
		.catch((err: any) => {
			$message.error(err.msg);
		}).finally(() => {
			loading.value = false;
		})
}
const batch = ref(false)
onLoad((options: any) => {
	getData();
	if (options.action == 'batch') {
		batch.value = true
	}
})
</script>
<style lang="scss" scoped>
.swiper {
	height: 600px;
}
</style>